<template>
    <fieldset>
        <legend>Product</legend>
        <h1>{{ $store.state.Product.name }}</h1>
        <ul>
            <li v-for="item in products" :key="item.id">
                <b>产品:{{ item.title }}</b>
                ---
                <b>价格:{{ item.price }}</b>
                ---
                <b>
                    库存:{{ item.inventory }}
                </b>
                <button :disabled="!item.inventory" @click="addToCart(item.id)">+点击加入到购物车</button>
            </li>
        </ul>
    </fieldset>
</template>
<script>
import { mapActions, mapState } from "vuex"
export default {
    computed: {
        //映射Product模块中的products属性
        ...mapState("Product", ["products"])
    },
    methods: {
        ...mapActions('Product', ['FETCH_PRODUCT']),
        // Cart中的actions
        ...mapActions('Cart', ['HANDLER_CART']),
        //添加到购物车
        addToCart(product_id) {
            //触发模块化Product store中的action类型
            this.HANDLER_CART(product_id)
        }
    },
    mounted() {
        this.FETCH_PRODUCT()
    }
}
</script>
<style scoped>
li {
    margin: 10px 0;
}
</style>